<template>
  <div>
    <el-container>
      <el-header class="titleBar">
        主营业务
      </el-header>

      <el-main class="mainContent">
        <el-card>
          <!-- 按钮操作列表 -->
          <el-row :gutter="10" style="margin-bottom:20px">
            <el-col :span="22"><div class="box_title"></div></el-col>
            <el-col :span="2">
              <el-button
                type="success"
                size="mini"
                @click="addDialogVisible = true"
              >
                <i
                  class="el-icon-circle-plus-outline"
                  @click="addDialogVisible = true"
                ></i>
                添加</el-button
              >
            </el-col>
          </el-row>
          <!-- 表单数据 -->
          <el-table
            :data="operatelist"
            border
            style="width: 100%"
            stripe
            :header-cell-style="{
              textAlign: 'center',
              background: '#ededed',
              color: '#333',
              fontWeight: '500',
            }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column label="编号" prop="id"></el-table-column>
            <el-table-column label="图片" prop="image">
              <!-- 插槽 slot-scope scope.row.image -->
              <template slot-scope="scope">
                <el-image
                  :src="scope.row.image"
                  style="width:100px;height:90px"
                  fit="cover"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column label="展示标题" prop="title"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-row :gutter="20" class="opBtn">
                  <el-col :span="10" class="etBtn">
                    <!-- @click="editDialogVisible = true " @click="showEditDialog(scope.row)" -->
                    <el-button
                      type="text"
                      size="small"
                      @click="showEditDialog(scope.row)"
                      >编辑</el-button
                    >
                  </el-col>
                  <el-col :span="10">
                    <el-button
                      type="text"
                      size="small"
                      class="deleteBtn"
                      @click="deleteBtn(scope.row)"
                      >删除</el-button
                    >
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.pagenum"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="pagination.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
          >
          </el-pagination>
        </el-card>
      </el-main>
    </el-container>

    <!-- 添加 -->
    <el-dialog
      title="添加业务"
      :visible.sync="addDialogVisible"
      width="30%"
      @close="addDialogClosed"
    >
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="70px"
        class="demo-ruleForm"
      >
        <el-form-item prop="file">
          <p>图片：</p>
          <el-upload
            class="avatar-uploader"
            ref="upload"
            action="#"
            :data="addForm"
            :show-file-list="false"
            :multiple="false"
            :auto-upload="false"
            :on-change="imgSaveToUrl"
          >
            <img
              v-if="this.addForm.image"
              :src="this.addForm.image"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item prop="title">
          <p>展示标题：</p>
          <el-select v-model="addForm.title" placeholder="请选择分类">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑轮播图 -->
    <el-dialog
      title="编辑业务"
      :visible.sync="editDialogVisible"
      width="30%"
      @close="editDialogClosed"
    >
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="70px"
        @close="editDialogClosed"
      >
        <el-form-item prop="file">
          <p>轮播图片：</p>
          <el-upload
            class="avatar-uploader"
            ref="upload"
            action="#"
            :data="editForm"
            :show-file-list="false"
            :multiple="false"
            :auto-upload="false"
            :on-change="imgSaveToUrl"
          >
            <img
              v-if="this.editForm.image"
              :src="this.editForm.image"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item prop="title">
          <p>展示标题：</p>
          <!-- <el-input v-model="editForm.title" type="text"></el-input> -->
          <el-select v-model="editForm.title" placeholder="请输入标题">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click=" editChartInfo"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [],
      value: "",
      //
      operateInfo: {
        total: 5,
        list: "",
      },
      pagination: {
        pagenum: 1,
        pagesize: 5,
        total: 7,
      },
      operatelist: [],
      // 添加对话框显示与隐藏
      addDialogVisible: false,
      addForm: {
        id: "",
        image: "",
        title: "",
      },
      // 添加表单的校验
      addFormRules: {
        id: [{ required: true, message: "请输入数值", trigger: "blur" }],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
      },
      // 编辑
      editDialogVisible: false,
      // 查询用户信息对象
      editForm: {
        id: "",
        image: "",
        title: "",
      },
      // 修改表单的校验规则对象
      editFormRules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
      },
    };
  },
  methods: {
    //
    async getOperateList() {
      const res = await this.http.get("/business/selectPage", this.pagination);
      this.operatelist = res.list;
      this.pagination.total = res.total;
      console.log(res);
    },
    //  监听pagesize/页码值改变
    handleSizeChange(newSize) {
      this.pagination.pagesize = newSize;
      this.getOperateList();
    },
    handleCurrentChange(newPage) {
      this.pagination.pagenum = newPage;
      this.getOperateList();
    },
    // 删除
    async deleteBtn(row) {
      console.log(row);
      const confirmResult = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((error) => error);
      console.log(confirmResult);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const res = await this.http.post("/business/delete", row.id);
      console.log(res);
      this.getOperateList();
    },
    //
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
    // 添加行为
    onSubmit() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return;
        // 发起添加网络请求
        const { res } = await this.http.post("/business/add", this.addForm);
        console.log(res);

        if (status.code !== 200) {
          this.$message.error("添加行为失败");
        }
        this.$message.success("添加行为成功");
        this.addDialogVisible = false;
        this.getOperateList();
      });
    },
    // 图片上传
    async imgSaveToUrl(event) {
      if (this.beforeUploadPicture(event.raw)) {
        var formData = new FormData();
        formData.append("file", event.raw);
        // console.log(formData);
        this.http.upload("/business/upload", formData).then((res) => {
          if (res.code == 200) {
            this.addForm.image = res.data;
            this.editForm.image = res.data;
            console.log(this.addForm);
            this.$message.success("上传成功");
          }
        });
      }
    },
    beforeUploadPicture(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG 或者 PNG 格式!");
      }
      if (isJPG && isPNG) {
        if (!isLt10M) {
          this.$message.error("上传头像图片大小不能超过 10MB!");
        }
      }
      return (isJPG || isPNG) && isLt10M;
    },
    // 编辑
    async showEditDialog(row) {
      this.editForm = row;
      const res = await this.http.post("/business/update", row);

      console.log(res);

      this.editDialogVisible = true;
      // console.log(row)
    },
    // 监听修改对话框的关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();
    },
    // 修改用户信息并提交
    editChartInfo() {
      this.$refs.editFormRef.validate(async (valid) => {
        // console.log(valid);
        if (!valid) return;
        // 发起请求获取
        const res = await this.http.post("/business/update", this.editForm, {
          title:this.editForm.title,
          image: this.editForm.image,
        });

        if (status.code !== 200) {
          this.$message.error("更新轮播图失败！");
        }
        // 关闭对话框
        this.editDialogVisible = false;
        // 刷新数据
        this.getOperateList();
        // 提示修改成功
        this.$message.success("更新轮播图成功!");
        console.log(res);
      });
    },
    async getSelectServe() {
      const res = await this.http.get("/type/selectServe");
      this.options = res.list;
      console.log(this.options);
    },
  },
  created() {
    this.getOperateList();
    this.getSelectServe();
  },
};
</script>

<style scoped>
.header_title {
  font-size: 22px;
  margin-bottom: 0px;
  font-weight: 400;
  color: #999999;
}
.bgk {
  background: pink;
}
</style>
